<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像库</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- LOGO按钮和导航栏 -->
    <div class="navbar-container">
        <div class="logo-btn" id="logo-btn">
            <div class="hamburger-icon">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <nav class="side-nav" id="side-nav">
            <div class="nav-header">
                <h3>图像文件夹</h3>
            </div>
            <ul class="nav-list" id="nav-list">
                <!-- 文件夹列表将通过JavaScript动态加载 -->
                <li class="loading">加载中...</li>
            </ul>
        </nav>
    </div>

    <header>
        <h2>MMCAT Library</h2>
    </header>

    <main>
        <div id="image-gallery" class="gallery">
            <!-- 图像将通过JavaScript动态加载 -->
            <div class="loading">加载中...</div>
        </div>
    </main>

    <div id="modal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="modal-image">
    </div>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>